<template>
    <section>
      <div class="recommend-title">热销推荐</div>
      <ul>
        <li class="item" v-for="item in recommendList" :key="item.id">
          <div class="item-img-wrapper">
            <img class="item-img" :src="item.imgUrl" alt="item.title">
          </div>
          <div class="item-info">
            <p class="item-title">{{item.title}}</p>
            <p class="item-desc">{{item.desc}}</p>
            <button class="item-button">查看详情</button>
          </div>
        </li>
      </ul>
    </section>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    recommendList: Array
  },
  data () {
    return {
      // recommendList: [
      //   {id: '0001', imgurl: 'http://img1.qunarzz.com/sight/p0/1612/1d/1d9a740c1f9e0efaa3.img.jpg_200x200_63285bd9.jpg', title: '成都海昌极地海洋公园', desc: '成都海昌极地海洋公园'},
      //   {id: '0002', imgurl: 'http://img1.qunarzz.com/sight/p0/1705/ed/edd4063a442f30c1a3.img.jpg_200x200_724f9e6a.jpg', title: '天堂岛海洋乐园', desc: '天堂岛海洋乐园'},
      //   {id: '0003', imgurl: 'http://img1.qunarzz.com/sight/p0/201309/24/977fea7b3c5cd758c8d65eac.jpg_200x200_697c3b3f.jpg', title: '成都熊猫基地', desc: '成都熊猫基地'},
      //   {id: '0004', imgurl: 'http://img1.qunarzz.com/sight/p0/1510/23/23fa69e071d77b48.water.jpg_200x200_a6b74058.jpg', title: '成都环球中心', desc: '成都环球中心'},
      //   {id: '0005', imgurl: 'http://img1.qunarzz.com/sight/p0/1807/ad/ad574bfe6c9e1ceda3.img.png_200x200_ea7a0734.png', title: '成都欢乐谷', desc: '成都欢乐谷'},
      //   {id: '0006', imgurl: 'http://img1.qunarzz.com/sight/p0/1505/b0/b0132e78efa00572.water.jpg_200x200_3f499a59.jpg', title: '青城山', desc: '青城山'},
      //   {id: '0007', imgurl: 'http://img1.qunarzz.com/sight/p0/201407/03/a584374ee80b738e2600d6bcaf1299e3.jpg_200x200_c26fb243.jpg', title: '都江堰', desc: '都江堰'}
      // ]
    }
  }
}
</script>

<style lang="less" scoped>
  @import '~styles/varibles.less';
  @import '~styles/mixins.less';
  .recommend-title {
    line-height: .8rem;
    background: #eee;
    text-indent: .2rem;
    margin-top: .2rem;
  }
  .item {
    display: flex;
    height: 1.9rem;
    overflow: hidden;
    border-bottom: 1px solid #e0e0e0;
    .item-img {
      width: 1.7rem;
      height: 1.7rem;
      padding: .1rem;
    }
    .item-info {
      flex: 1;
      padding: .1rem;
      min-width: 0;
      .item-title {
        line-height: .54rem;
        font-size: .32rem;
        .ellipsis();
      }
      .item-desc {
        line-height: .4rem;
        color: #ccc;
        .ellipsis();
      }
      .item-button {
        background: #ff9300;
        padding: 0 .2rem;
        border-radius: .06rem;
        color: #fff;
        margin-top: .2rem;
        line-height: .44rem;
        border: 0;
        outline: none;
      }
    }
  }
  .item:last-child {
    border: 0;
  }
</style>
